<template>
  <el-card class="form-container" shadow="never">
    <el-form
      :model="data"
      :rules="rules"
      ref="dataFrom"
      label-width="150px"
      size="small">
      <el-form-item label="标题：" prop="title">
        <el-input v-model="data.title" class="input-width" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="位置：" prop="position">
        <el-input v-model="data.position" class="input-width" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="封面：" prop="picId">
        <single-upload v-model="data.picId" tip="提示：请上传 690x278（Px）尺寸的图片，大小不超过500K。"></single-upload>
      </el-form-item>
      <el-form-item
        label="正文："
        prop="content"
      >
        <div
          ref="editor"
          class="editor-wrapper"
        ></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('dataFrom')">提交</el-button>
        <!--<el-button v-if="!isEdit" @click="resetForm('courseFrom')">重置</el-button>-->
        <el-button @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import SingleUpload from '@/components/Upload/singleUpload'
import WEditor from 'wangeditor'
import { bestvolunteerSave, bestvolunteerGetById } from '@/api/neighbour'

const defaultGuide = {
  status: 0,
  title: '',
  picId: '',
  bestVolunteerDetail: {
    volunteerDetail: ''
  }
}
export default {
  name: 'GuideDetail',
  components: { SingleUpload },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      data: {},
      loading: false,
      rules: {
        title: [
          { required: true, message: '请输入', trigger: 'blur' }
          // { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请输入', trigger: 'blur' }
          // { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        picId: [
          { required: true, message: '请选择课程封面', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    if (this.isEdit) {
      bestvolunteerGetById({ id: this.$route.query.id }).then(response => {
        const { status, title, position, picId, bestVolunteerDetail } = response.data
        this.data = {
          status,
          title,
          position,
          picId,
          bestVolunteerDetail: bestVolunteerDetail || { volunteerDetail: '' }
        }
        this.initEditor(this.data.bestVolunteerDetail.volunteerDetail)
      })
    } else {
      this.data = Object.assign({}, defaultGuide)
      this.initEditor('')
    }
  },
  methods: {
    initEditor (content) {
      this.editor = new WEditor(this.$refs.editor)
      // this.editor.customConfig.debug = true
      this.editor.customConfig.uploadImgServer = '/zdmanage/upload'
      this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
      // this.editor.customConfig.uploadImgParams = {
      //   busiType: 'rich'
      // }
      this.editor.customConfig.customAlert = function (info) {
        // message.error(info)
      }
      this.editor.customConfig.uploadFileName = 'file'
      this.editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result) {
          if (!result.data) {
            // message.error(result.resultMessage)
          } else {
            insertImg(result.data)
          }
        }
      }
      this.editor.customConfig.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        // 'link', // 插入链接
        // 'list', // 列表
        'justify', // 对齐方式
        // 'quote', // 引用
        // 'emoticon', // 表情
        'image', // 插入图片
        // 'table', // 表格
        // 'video', // 插入视频
        // 'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ]
      // this.editor.customConfig.onchange = (html) => {
      //   this.editorContent = html
      //   this.$emit('change', this.editorContent)
      // }
      this.editor.create()
      this.editor.txt.html(content)
    },
    onSubmit (formName) {
      this.data.bestVolunteerDetail.volunteerDetail = this.editor.txt.html()
      // if (!this.data.content) {
      //   return this.$message({
      //     message: '请输入正文',
      //     type: 'error',
      //     duration: 1000
      //   })
      // }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const params = {
              ...this.data
            }

            if (this.$route.query.id) {
              params.id = this.$route.query.id
            }

            bestvolunteerSave(params).then(response => {
              this.$message({
                message: '提交成功',
                type: 'success',
                duration: 1000
              })
              this.$router.back()
            })
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    },
    back () {
      this.$router.go(-1)
    }
  }

}
</script>
<style scoped>
  .input-width {
    width: 70%;
  }
  .editor-wrapper{
    position: relative;
    z-index: 2;
  }
</style>
